<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				width: 300px;
				height: 150px;
				text-align: center;
			}

			tr {
				background-color: white;
			}
			botton{
				border: 0;
				background-color: white;
				color: #FF0000;
			}
		</style>

	</head>
	<body>
		如何更改placeholder的样式：<br />
		在input标签后加上<br />
		::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */<br />
		:-moz-placeholder{} /* Firefox版本4-18 */<br />
		::-moz-placeholder{} /* Firefox版本19+ */<br />
		:-ms-input-placeholder{} /* IE浏览器 */<br />


		<table border="0" cellspacing="1" cellpadding="" style="background-color: #000000;">
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
			<tbody id="tbody">
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			var arr = [{
				ID: 1,
				name: "张可爱",
				sex: "男",
				age: 16
			}, {
				ID: 2,
				name: "李可爱",
				sex: "女",
				age: 17
			}, {
				ID: 3,
				name: "王可爱",
				sex: "男",
				age: 18
			}, {
				ID: 4,
				name: "刘可爱",
				sex: "女",
				age: 19
			}, ];
			var tbody = document.getElementById("tbody");
			tbody.innerHTML = "";
			var trs = "";
			var tr1 = "";
			for (var i = 0; i < arr.length; i++) {
				var trs = "<tr>"+
				"<td>" + arr[i].ID + "</td>"+
				"<td>" + arr[i].name + "</td>"+
				"<td>" + arr[i].sex + "</td>"+
				"<td>" + arr[i].age + "</td>"+
				"<td>" + "<button>编辑/删除</button>" + "</td>"+
				"</tr>"
				tr1 += trs;
			}
			tbody.innerHTML = tr1;
		</script>
	</body>
</html>
